import React, { PureComponent, Fragment, useState, useContext, useEffect, useRef } from 'react';
import { Popconfirm, Icon, Form, Radio, Select, Row, Col, Input, Tabs, Button, Upload, message, Descriptions, Card, Table, Checkbox, Tooltip } from 'antd';
import Login from './business/Login';
import PromptMessage from './business/PromptMessage';
import Register from './business/Register';
import {
    queryCityOfficialParam,
    getCityPromptMsg,
    queryOfficialNameByCityCode,
    getCityInfoAccPass
} from '@/services/business';

const formItemLayout = {
    labelCol: { span: 9 },
    wrapperCol: { span: 8 },
};
const { TabPane } = Tabs;
class HandleOption {
    static cacheOption = {};
    static async getOptionData(data = {}) {
        let curData = this.cacheOption[data.name];
        if (curData) return curData;
        const dataObj = await queryOfficialNameByCityCode(data);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            curData = dataObj.data;
        }
        return curData;
    }
}
@Form.create({})
class Business extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            curKey: 1,
            cityOfficialOption: [],
            officialType: '0',
            officialCode: '',
            loginData: [],
            promptData: {},
            registerData: [],
            modifyData: []
        }
        this.getCityOfficialNameData();
    }
    // 获取城市社保公积金官网配置
    async getCityOfficialNameData(officialType) {
        const { cityCode } = this.props.record;
        officialType = officialType || this.state.officialType;
        const officialData = await HandleOption.getOptionData({ officialType, cityCode });
        if (officialData) {
            this.setStateData('cityOfficialOption', officialData);
            const defaultOfficialCode = officialData[0] && officialData[0].officialCode
            this.setOfficialCode(defaultOfficialCode);
        }
    }
    /**
     * @description 获取城市业务表单信息
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    async queryCityOfficialParam(params) {
        const dataObj = await queryCityOfficialParam(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            const tempData = dataObj.data.map((item, i) => {
                item.id = String(i);
                return item;
            })
            this.setState(oldState => ({
                ...oldState,
                loginData: tempData || []
            }));
        }
    };
    /**
    * @description 获取城市业务提示信息
    * @author zlh
    * @date 2021-10-29
    * @memberof
    */
    async getCityPromptMsg(params) {
        const dataObj = await getCityPromptMsg(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            this.setState(oldState => ({
                ...oldState,
                promptData: dataObj.data
            }));
        }
    };
    /**
    * @description 获取城市注册or修改密码配置列表
    * @author zlh
    * @date 2021-10-29
    * @memberof
    */
    async getCityInfoAccPass(params) {
        const dataObj = await getCityInfoAccPass(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            const tempData = dataObj.data.map((item, i) => {
                item.id = String(i);
                return item;
            })
            return tempData;
        }
    };
    async getRegisterCityList(params) {
        params.accPassType = '0';
        const data = await this.getCityInfoAccPass(params);
        if (data) {
            this.setState(oldState => ({
                ...oldState,
                registerData: data
            }));
        }
    }
    async getModifyPasswordCityList(params) {
        params.accPassType = '1';
        const data = await this.getCityInfoAccPass(params);
        if (data) {
            this.setState(oldState => ({
                ...oldState,
                modifyData: data
            }));
        }
    }
    setStateData(name, value) {
        this.setState({
            [name]: value
        })
    }
    // 设置官方类型
    setOfficialType(value) {
        this.setStateData('officialType', value);
        this.getCityOfficialNameData(value);
    }
    // 设置官方编码
    setOfficialCode(value) {
        this.setStateData('officialCode', value);
        this.handleChangeTab(this.state.curKey);
    }
    handleCurrencyChange(value, name) {
        this.handlerRequest(name, value)
    }
    handlerRequest(key, data) {
        const config = {
            'officialType': this.setOfficialType,
            'officialCode': this.setOfficialCode,
            '1': this.queryCityOfficialParam,
            '2': this.getCityPromptMsg,
            '3': this.getRegisterCityList,
            '4': this.getModifyPasswordCityList
        }
        config[key].call(this, data)
    }
    handleChangeTab(key) {
        this.setStateData('curKey', key);
        const { officialType, officialCode } = this.state;
        this.handlerRequest(key, { cityCode: this.props.record.cityCode, officialCode, officialType });
    }
    render() {
        const { loginData, promptData, registerData, modifyData, cityOfficialOption, officialType, officialCode } = this.state;
        const { record } = this.props;
        return <div>
            <Row>
                <Col span={5}>
                    <Form.Item label="城市名称:" {...formItemLayout}>
                        {record.cityName}
                    </Form.Item>
                </Col>
                <Col span={5}>
                    <Form.Item label="城市代码:" {...formItemLayout}>
                        {record.cityCode}
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item label="业务类型" {...formItemLayout}>
                        <Select value={officialType} name="officialType" style={{ width: 120 }} onChange={(e) => this.handleCurrencyChange(e, 'officialType')}>
                            <Option value="0">社保</Option>
                            <Option value="1">公积金</Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item label="官网名称" {...formItemLayout}>
                        <Select value={officialCode} name='officialCode' style={{ width: 120 }} onChange={(e) => this.handleCurrencyChange(e, 'officialCode')}>
                            {cityOfficialOption.map(function name(params, index) {
                                return <Option key={params.value} value={params.officialCode}>{params.officialName}</Option>
                            })}
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Tabs onChange={this.handleChangeTab.bind(this)} type="card">
                <TabPane tab="表单信息" key="1">
                    <Login sourcesdata={loginData} cityCode={record.cityCode} officialType={officialType} />
                </TabPane>
                <TabPane tab="提示信息" key="2">
                    <PromptMessage sourcesdata={promptData} cityCode={record.cityCode} officialType={officialType} />
                </TabPane>
                <TabPane tab="注册账号信息" key="3">
                    <Register sourcesdata={registerData} cityCode={record.cityCode} officialType={officialType} accPassType="0" name="注册账号" />
                </TabPane>
                <TabPane tab="修改密码信息" key="4">
                    <Register sourcesdata={modifyData} cityCode={record.cityCode} officialType={officialType} accPassType="1" name="修改密码" />
                </TabPane>
            </Tabs>
        </div>

    }
}
export default Business;